<style lang="scss">
  @import "../../../assets/css/_variable";

  .exercise {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: $color-white;

    .header {
      width: 100%;
      height: 60px;
      padding: 1em;
      border-bottom: 1px solid $color-gray;
    }

    .panel {
      position: fixed;
      bottom: 0;
      height: 60px;
      width: 100%;
      border: 1px solid $color-gray;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .steps {
        .star {
        }
      }
      .buttons {
        .check {
          width: 100px;
        }
      }
    }
  }
</style>
<template>
  <div class="exercise">
    <el-row class="header" type="flex" justify="space-between" align="middle">
      <el-col :span="6" @click.native="close()">
        <div class="margin-left-normal"><i class="el-icon-close"></i></div>
      </el-col>
      <el-col :span="12" class="text-align-center">
        <div>标题</div>
      </el-col>
      <el-col :span="6">
        <div></div>
      </el-col>
    </el-row>
    <question v-if="question" :question="question" :checking="checking" :answer.sync="answer"></question>
    <div class="panel">
      <div class="steps">
        <template v-for="(taskQuestions,index) in taskQuestions">
          <i class="star" :class="starClass(index)"></i>
        </template>
      </div>
      <div class="buttons">
        <el-button type="primary" class="check" @click="check()">检查</el-button>
      </div>
    </div>
    <el-dialog
      title="完成练习！" :close-on-click-modal="false"
      :close-on-press-escape="false" :show-close="false"
      :visible.sync="dialogFinished">
      <span>恭喜！完成！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/babel">

  import Question from './Question.vue';

  export default {
    components: {
      Question
    },
    created() {
      let handler = this;
      let url = this.$route.query['url'];
      if (url) {
        this.$http(url).then((data) => {
          handler.task = data;
          handler.taskQuestions = data.questions;
          //设置断点序号
          let i = 0;
          for (i = 0; i < handler.taskQuestions.length; i++) {
            let taskQuestion = handler.taskQuestions[i];
            if (!taskQuestion.result) {
              handler.current = i;
              break;
            }
          }
          if (i === handler.taskQuestions.length) {
            //题目已做完
            this.finish();
          }
        });
      }
    },
    data() {
      return {
        dialogFinished: false,
        optionIndex: ['A', 'B', 'C', 'D'],
        task: {},
        current: 0,
        mission: {},
        modelId: 0,
        answer: '',
        checking: false,
        taskQuestions: []
      }
    },
    computed: {
      taskQuestion() {
        return this.taskQuestions[this.current];
      },
      question() {
        let taskQuestion = this.taskQuestions[this.current];
        if (taskQuestion) {
          return taskQuestion.question;
        } else {
          return null;
        }
      },
      questionStem() {
        this.renderMathInParent(this.question.stem, 'question-stem');
        return this.question.stem;
      }
    }
    ,
    methods: {
      renderMathInParent: function (text, parentClassName) {
        let elem = this.$func.renderLatexFromString(text);
        let parentElem = document.getElementsByClassName(parentClassName)[0];
        if (parentElem) {
          parentElem.innerHTML = '';
          parentElem.appendChild(elem);
        }
        return elem;
      },
      optionClass(index) {
        if (this.checking) {
          let clazz = 'color-primary';
          if (index === this.answer) {
            clazz = 'bg-color-danger color-white';
            if (this.answer === this.question.answer) {
              clazz = 'bg-color-success color-white';
            }
          }
          return clazz;
        } else {
          if (index === this.answer) {
            return 'bg-color-warning color-white';
          }
          return '';
        }
      },
      starClass(index) {
        if (index === this.current) {
          return 'color-success el-icon-star-off font-header';
        } else {
          let result = this.taskQuestions[index].result;
          if (!result || result === 0) {
            return 'color-success el-icon-star-off';
          } else if (result === 1) {
            return 'color-success el-icon-star-on';
          } else if (result === -1) {
            return 'color-gray el-icon-star-on';
          }
        }
      },
      check() {
        this.checking = true;
        this.taskQuestion.attempt++;
        if (this.answer === this.question.answer) {
          this.checked();
        } else {
          this.wrong();
        }
      },
      next() {
        this.answer = '';
        this.checking = false;
        if (this.current < this.taskQuestions.length - 1) {
          this.current++;
        } else {
          //完成练习，提交结果
          this.finish();
          this.submitTask();
        }
      },
      checked() {
        alert('right');
        if (!this.taskQuestion.result||this.taskQuestion.result === 0) {
          this.taskQuestion.result = 1;
        }
        this.saveAnswer();
        this.next();
      },
      wrong() {
        alert('wrong');
        this.taskQuestion.result = -1;
        this.answer = '';
        this.checking = false;
      },
      finish() {
        this.dialogFinished = true;
      },
      close() {
        this.$router.go(-1);
      },
      saveAnswer() {
        if (global_token) {
          let url = this.$store.state.app.api.el + 'task/saveAnswer';
          let taskQuestionJson = JSON.stringify(this.taskQuestion);
          url += '?' + this.$func.toUrlQuery({taskQuestionJson});
          this.$http.get(url)
            .then((data) => {
              console.log(' save success');
            })
        }
      },
      submitTask() {
        this.task.status = 'done';
        if (global_token) {
          let taskJson = JSON.stringify(this.task);
          let url = this.$store.state.app.api.el + 'task/saveTask?taskJson=' + taskJson;
          this.$http.get(url)
            .then((data) => {
              console.log(' save success');
            })
        }
      }
    },
    mounted() {
    }
  };
</script>
